<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>放大镜</title>
    <link rel="stylesheet" href="./css/zoom.css" />
  </head>
  <body>
    <div class="zoom">
      <!-- 小图 -->
      <div class="small-img">
        <img src="./images/small01.jpg" alt="small-img" />
        <div class="ball"></div>
      </div>
      <!-- 缩略图 -->
      <ul class="thum">
        <li class="active">
          <img src="images/thum01.jpg" alt="" thum-img="" />
        </li>
        <li><img src="images/thum02.jpg" alt="" thum-img="" /></li>
        <li><img src="images/thum03.jpg" alt="" thum-img="" /></li>
        <li><img src="images/thum04.jpg" alt="" thum-img="" /></li>
        <li><img src="images/thum05.jpg" alt="" thum-img="" /></li>
      </ul>
      <!-- 大图 -->
      <div class="big-img">
        <img src="./images/big01.jpg" alt="big-img" />
      </div>
    </div>
  </body>
  <script src="./JS/zoom.js"></script>
</html>
